import ProjectListScreen from "screen/project-list";
import React, { Context, useState } from "react";
import { Button, Dropdown, Menu } from "antd";
import styled from "@emotion/styled";
import { ButtonNoPadding, Row } from "components/lib";
import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { useAuth } from "context/auth-context";
import { resetRoute, useDocumentTitle } from "utils/index";
import { ProjectScreen } from "screen/project/index";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter } from "react-router-dom";
import { ProjectModel } from "screen/project-list/project-model";
import { ProjectPopover } from "components/project-opover";
import { useDispatch } from "react-redux";
import { projectListAction } from "screen/project-list/project-list.store";
export const AuthenticatedApp = () => {
  const dispatch = useDispatch();
  // const [projectModalOpen, setprojectModalOpen] = useState(false);
  useDocumentTitle("项目列表", false);
  return (
    <Container style={{ textAlign: "center" }}>
      <Header />
      <Main>
        <BrowserRouter>
          <Routes>
            <Route
              path={"/projects"}
              element={
                <ProjectListScreen
                  projectButton={
                    <ButtonNoPadding
                      type={"link"}
                      onClick={() =>
                        dispatch(projectListAction.closeProjectModal())
                      }
                    >
                      创建项目
                    </ButtonNoPadding>
                  }
                ></ProjectListScreen>
              }
            ></Route>
            <Route
              path={`/projects/:projectId/*`}
              element={<ProjectScreen></ProjectScreen>}
            ></Route>
            <Route
              path="*"
              element={<Navigate to="/projects" replace={true} />}
            />
          </Routes>
        </BrowserRouter>
      </Main>
      <ProjectModel></ProjectModel>
    </Container>
  );
};
//grid布局
// const Container = styled.div`
//   display: grid;
//   grid-template-rows: 6rem 1fr 6rem;
//   grid-template-columns: 20rem 1fr 20rem;
//   grid-template-areas:
//     "header header header"
//     "nav main aside"
//     "footer footer footer";
//   height: 100vh;
//   grid-gap: 5rem;
// `;
// const PageHeader = styled.header`
//   grid-area: header;
//   height: 6rem;
// `;
// const Main = styled.main`
//   grid-area: main;
//   height: 6rem;
//   height: calc(100vh -6rem);
// `;
// const Nav = styled.nav`
//   grid-area: nav;
// `;
// const Aside = styled.aside`
//   grid-area: aside;
// `;
// const Footer = styled.footer`
//   grid-area: footer;
// `;
//flex布局

const Header = () => {
  const { loginout, user } = useAuth();
  return (
    <PageHeader between={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type="link" onClick={resetRoute}>
          <SoftwareLogo width={"18rem"} color={"rgb(38,132,255)"} />
        </ButtonNoPadding>
        <ProjectPopover />
        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key={"logout"}>
                <Button type={"link"} onClick={loginout}>
                  登出
                </Button>
              </Menu.Item>
            </Menu>
          }
        >
          <Button type={"link"} onClick={(e) => e.preventDefault()}>
            {" "}
            Hi,{user?.name ? user.name : ""}
          </Button>
        </Dropdown>
      </HeaderRight>
    </PageHeader>
  );
};

const Container = styled.div`
  height: 100vh;
`;
const PageHeader = styled(Row)`
  grid-area: header;
  height: 6rem;
  flex-direction: row;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)`
  &:hover {
    cursor: pointer;
  }
`;
const HeaderRight = styled.div``;
const Main = styled.main`
  grid-area: main;
  height: 6rem;
  height: calc(100vh -6rem);
`;
